<template>
  <div>
    <!-- 查詢 -->
    <el-row>
      <el-col :span="16">
        <el-button primary @click="back">《返回</el-button>
      </el-col>
      <el-col :span="8">
        <el-row justify="end">
         
        </el-row>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row style="padding-top: 20px">
      <el-col :span="24">
        <!-- :data="Datalist.ComList" -->
        <el-table  :data="Datalist.ComList" border style="width: 100%">
          <el-table-column prop="date" label="签到时间" align="center" />
          <el-table-column prop="coachName" label="签到" align="center" />
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row style="padding-top: 20px">
      <el-col :span="4" :offset="20">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="searchData.count"
          @size-change="sizeChange"
          @current-change="currentChange"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import { getRecordAppointment, getSign } from "../../http/api";
import { ListData, listInt } from "../../type/RecordAppointment";
import { computed } from "@vue/reactivity";
import router from "../../router";
import { ElMessage } from "element-plus";
export default defineComponent({
  setup() {
    onMounted(() => {
      //挂载时就获取数据
      getList();
    });
    const back = () => {
      router.push("/record");
    };
    const sign = () => {
      ElMessage({
        message: "签到成功",
        type: "success",
      });
    };
    
    //获取表格数据接口
    const getList = () => {
      getSign().then((res) => {
        // console.log(res);
        data.list = res.data;
        data.searchData.count = res.data.length;
      });
    };
    //实例化ListData对象
    const data = reactive(new ListData());
    //search
    const search = () => {
      // console.log(data.searchData.courseName);
      // console.log(data.searchData.coachName);
      let arr: listInt[] = []; //定义数组，用来接收查询过后要展示的数据
      if (data.searchData.courseName|| data.searchData.coachName) {
        //判断搜索框是否有值
        if (data.searchData.courseName) {
          arr = data.list.filter((value) => {
            //将过滤出来的数组赋值给arr
            return value.courseName.indexOf(data.searchData.courseName) !== -1;
          });
        }
        if (data.searchData.coachName) {
          arr = data.list.filter((value) => {
            //将过滤出来的数组赋值给arr
            return value.coachName.indexOf(data.searchData.coachName) !== -1;
          });
        }
      } else {
        arr = data.list;
      }
      data.searchData.count = arr.length;
      data.list = arr;
    };
    //监听输入框的属性
    watch([() => data.searchData.courseName, () => data.searchData.coachName], () => {
      //如果为空就显示原数据
      if (data.searchData.courseName== "" && data.searchData.coachName == "") {
        //重新获取接口数据
        getList();
      }
    });
    //分页
    const sizeChange = (pagesize: number) => {
      data.searchData.pagesize= pagesize; //每页多少条
    };
    const currentChange = (page: number) => {
      data.searchData.page = page; //第几页
    };
    //计算属性，查询后的分页显示
    const Datalist = reactive({
      ComList: computed(() => {
        //1---[1-10]
        //2---[11-20]
        //3---[21-30]
        return data.list.slice(
          (data.searchData.page - 1) * data.searchData.pagesize,
          data.searchData.page * data.searchData.pagesize
        );
      }),
    });
    return {
      ...toRefs(data),
      search,
      sizeChange,
      currentChange,
      Datalist,
      watch,
      
      back,
      sign,
    };
  },
});
</script>
<style scoped>
.main {
  background-color: white;
  border-radius: 10px;
}
</style>
